<template>
  <view class="page-container" :style="containerStyle">
    <!-- 导航栏插槽 -->
    <slot name="navbar">
      <global-navbar 
        v-if="showNavbar"
        :title="title"
        :show-left-arrow="showLeftArrow"
        :left-icon="leftIcon"
        :bg-color="navbarBgColor"
        :title-color="navbarTitleColor"
        @leftClick="handleNavbarLeftClick"
      />
    </slot>
    
    <!-- 页面内容 -->
    <view class="page-content" :style="contentStyle">
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
import { computed, defineProps, defineEmits, getCurrentInstance } from 'vue'
import { useNavbarHeight } from '@/hooks/useNavbar'
import GlobalNavbar from '@/components/global-navbar/global-navbar.vue'

// 使用全局导航栏高度
const { navbarHeightCss } = useNavbarHeight()

// 定义属性
const props = defineProps({
  // 页面标题
  title: {
    type: String,
    default: ''
  },
  // 是否显示导航栏
  showNavbar: {
    type: Boolean,
    default: true
  },
  // 是否显示左侧返回箭头
  showLeftArrow: {
    type: Boolean,
    default: true
  },
  // 左侧图标
  leftIcon: {
    type: String,
    default: 'arrow-left'
  },
  // 导航栏背景色
  navbarBgColor: {
    type: String,
    default: '#ffffff'
  },
  // 导航栏标题颜色
  navbarTitleColor: {
    type: String,
    default: '#333333'
  },
  // 页面背景色
  backgroundColor: {
    type: String,
    default: '#f5f5f5'
  },
  // 内容区域内边距
  padding: {
    type: String,
    default: '20rpx'
  },
  // 是否全屏（无内边距）
  fullscreen: {
    type: Boolean,
    default: false
  },
  // 自定义样式
  customStyle: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['navbarLeftClick'])

// 容器样式
const containerStyle = computed(() => {
  return {
    backgroundColor: props.backgroundColor,
    minHeight: '100vh',
    ...props.customStyle
  }
})

// 内容区域样式
const contentStyle = computed(() => {
  const paddingTop = props.showNavbar ? navbarHeightCss.value : '0'
  const padding = props.fullscreen ? '0' : props.padding
  
  return {
    paddingTop,
    padding: props.fullscreen ? `${paddingTop} 0 0 0` : `${paddingTop} ${padding} ${padding} ${padding}`,
    minHeight: props.showNavbar ? `calc(100vh - ${navbarHeightCss.value})` : '100vh',
    boxSizing: 'border-box'
  }
})

// 导航栏左侧点击事件处理
const handleNavbarLeftClick = () => {
  // 先触发父组件事件
  emit('navbarLeftClick')
  
  // 然后执行默认返回行为（如果父组件需要阻止默认行为，可以通过事件处理）
  uni.navigateBack({
    fail: () => {
      // 如果无法返回，可能是首页，什么都不做
      console.log('无法返回上一页，可能已在首页')
    }
  })
}
</script>

<style lang="scss" scoped>
.page-container {
  position: relative;
  width: 100%;
}

.page-content {
  position: relative;
  width: 100%;
}
</style> 